<template>
	<view class="nav-bar">
		<van-nav-bar @click-right="onClickRight">
			<!-- 自定义左侧区域 -->
			<template #left>
				<slot name="left" v-if="left"></slot>
				<block v-else>
					<van-icon
						name="arrow-left"
						size="18"
						@click="onClickLeft"
					/>
					<text style="color: #1989fa" @click="onClickLeft">返回</text>
				</block>
			</template>
			<!-- 自定义中间区域 -->
			<template #title>
				<slot name="title"></slot>
			</template>
			<!-- 自定义右侧区域 -->
			<template #right v-if="right">
				<slot name="right"></slot>
			</template>
		</van-nav-bar>
	</view>
</template>

<script lang="ts" setup>
const props = defineProps({
	left: {
		type: Boolean,
		default: false,
	},
    right: {
		type: Boolean,
		default: false,
	},
})

const { left, right } = toRefs(props)

const emit = defineEmits()

function onClickLeft() {
	// history.back()
    navigateBack()
}

function onClickRight() {
	emit('onClickRight')
}

defineExpose({
	onClickRight,
})
</script>

<style></style>
